<!DOCTYPE html>
<html>
<head>
    <title>my bar chart</title>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>

    <script type="text/javascript">
        var margin = {top: 20, right: 20, bottom: 70, left: 40};
        var width = 600 - margin.left - margin.right;
        var height = 300 - margin.top - margin.bottom;

        var parseDate = d3.timeFormat("%Y-%m").parse;
        var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
        var y = d3.scale.linear().range([height, 0]);

        var svg = d3.select('body').append('svg')
            .attr('width', width + margin.left + margin.right)
            .attr('height', height + margin.top + margin.bottom)
            .attr('style', 'background-color:#eee;');

        console.log('begin load csv');

        d3.csv('bar-data.csv', function(err, data) {
            console.log(err);
            console.log(data);

            data.forEach(function(d) {
                d.date = parseDate(d.date);
                d.value = +d.value;
            });

            svg.selectAll("bar")
                .data(data)
                .enter()
                .append("rect")
                .style("fill", "steelblue")
                .attr("x", function(d) { return x(d.date); })
                .attr("width", x.rangeBand())
                .attr("y", function(d) { return y(d.value); })
                .attr("height", function(d) { return height - y(d.value); });
        });
    </script>

</body>
</html>